<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>悬浮窗效果</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="./base.js"></script>
	<style type="text/css">
	.btn1{
		margin: 100px;
	}
	.tc{
		width: 900px;
		height: 560px;
		box-shadow: 1px 1px 5px #888888;
		position: absolute;
		top: 30px;
		left: 225px;
		background: #fff;
		/*display: none;*/
	}
	.tc .head{
		width: 900px;
		height: 60px;
		background: #f3f3f3;
		padding-top: 20px;
		padding-left: 15px;
		border-bottom: 1px solid #e5e5e5;
	}
	h4{
		margin: 0px;
	}
	.body{
		width: 900px;
		height: 500px;
		padding: 55px 70px;
	}
	.body .zhuce{
		float: left;
		width: 375px;
		height: 390px;
		border-right: 1px solid #e5e5e5;
	}
	.body .login{
		padding-left: 70px;
		float: left;
		width: 375px;
		height: 390px;
	}
	.xxx{
		position: absolute;
		top: 20px;
		right: 15px;
		font-size: 21px;
		font-weight: 700;
		color: #c2c2c2;

	}
	.xxx:hover{
		color: #000;
	}
	.bg{
		background: rgba(0,0,0,0.1);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		/*display: none;*/
	}
	span{
		cursor:pointer;
	}
	.form-control{
		width: 60%;
	}
	.h4{
		margin-top: 0px;
		margin-bottom: 15px;
	}
	</style>
</head>
<body>
	<div class="bg"></div>
	<div class="btn btn-primary btn1" id="btn1">点击弹出</div>
	<div class="tc">
		<div class="head">
			<h4>登录</h4>
			<span class="xxx">x</span>
		</div>
		<div class="body">
			<div class="zhuce">
				<h4 class="h4">注册新账号</h4>
				<form action="">
					<table>名字</table>
					<input type="text" name="username" class="form-control" id="username">
					<br>
					<input type="radio">
					<table>用手机号注册</table>
					<input type="radio">
					<table>用 Email 注册</table>
					<input type="text" name="phone" class="form-control">
					<br>
					<input type="text" name="yzma" class="form-control">
					<br>
					<table>密码</table>
					<input type="password" name="password" class="form-control">
					<br>
					<table>同意并接受<a href="">《服务条款》</a></table>
					<input type="submit" value="注册" class="btn btn-success">
				</form>
			</div>
			<div class="login">
				<h4 class="h4">用户登录</h4>
				<form action="">
					<table>手机号 或 Email</table>
					<input type="text" name="phone" class="form-control">
					<br>
					<table>密码</table>
					<input type="password" name="password" class="form-control">
					<br>
					<input type="checkbox">
					<table>记住登录状态</table>
					<input type="submit" value="登录" class="btn btn-success">
				</form>
			</div>
		</div>
	</div>
<!-- 	<div class="input-group">
		<input name="code" type="text" class="form-control js-user-login__phone-code-value" placeholder="短信验证码">
		<span class="input-group-btn">
			<button class="btn btn-default js-user-login__phone-vaild-btn" style="width:96px;" type="button">获取验证码</button>
		</span>                    
    </div> -->
</body>
</html>